<script setup lang="ts">
import {useRoute} from "vue-router";
import {onMounted, reactive, ref} from "vue";
import {businessLogin, businessRegister, checkUser, customerLogin, customerRegister} from "../network/api.ts";
import router from "../Router";

const route = useRoute();
let type = ref("");
let username = ref("");
let password = ref("");
let userId = ref();
let count = ref()
let message = ref()
// let count:Number = ref()//这样子写,会丧失ref特性

onMounted(()=>{
  if (route.query.typeId == 3){
    type.value = "Customer"
  }
  if (route.query.typeId == 4){
    type.value = "Business"
  }
})

function login(){
  console.log("username.value",username.value)
  console.log("password.value",password.value)
  console.log(type.value)
  if(username.value == "" || password.value == ""){
    message.value="can't empty"
  }else{
      let user = reactive({
        username:username.value,
        password:password.value
      })
        if(type.value == "Business"){
          businessLogin(user).then(res=> {
            console.log(res.data)
            if(res.data.id){
              console.log(res.data)
              userId.value = res.data.id
              sessionStorage.setItem("userId",userId.value)
              sessionStorage.setItem("username",username.value)
              console.log(sessionStorage.getItem("userId"))
              message.value="Login success"
              router.push({
                path:'/business/listShops'
              })
            }else{
              message.value="Login fail, register or try again"
            }
          })
        }
        if(type.value == "Customer"){
          customerLogin(user).then(res=> {
            if(res.data.id){
              console.log(res.data)
              userId.value = res.data.id
              sessionStorage.setItem("userId",userId.value)
              sessionStorage.setItem("username",username.value)
              console.log(sessionStorage.getItem("userId"))
              message.value="Login success"
              router.push({
                path:"/customer/browseAllShop",
              })
            }else{
              message.value="Login fail, register or try again"
            }
          })
        }
  }
}
function register(){
  console.log("username.value",username.value)
  console.log("password.value",password.value)
  if(username.value == "" || password.value == ""){
    message.value="can't empty"
  }else{
    checkUser(username.value).then(res=>{
      let user = reactive({
        username:username.value,
        password:password.value
      })
      count.value = res.data
      console.log("count.value:",count.value)
      if(count.value == 0){
        if(type.value == "Business"){
          businessRegister(user).then(res=> {
            console.log(res.data)
            userId.value = res.data.id
            sessionStorage.setItem("userId",userId.value)
            sessionStorage.setItem("username",username.value)
            console.log(sessionStorage.getItem("userId"))
            router.push({
              path:'/business/listShops'
            })
          })
        }
        if(type.value == "Customer"){
          customerRegister(user).then(res=> {
            console.log(res.data)
            userId.value = res.data.id
            console.log("userId.value:",userId.value)
            sessionStorage.setItem("userId",userId.value)
            sessionStorage.setItem("username",username.value)
            console.log(sessionStorage.getItem("userId"))
            router.push({
              path:"/customer/browseAllShop",
            })
          })
        }
        message.value="Register success"
      }else{
        message.value="have this user"
      }
    })
  }
}
</script>

<template>
  <header class="title flex justify-center items-center"
          :class="[type=='Customer' ? 'customer' : 'business']"
  >
    <h1 class="text-white select-none">
      {{ type }}
    </h1>
  </header>
  <div class="input mt-5vw flex flex-col justify-center items-center h-40vw">
    <div class="mt-5vw flex ">
      <div class="w-30vw select-none"><p class="flex justify-center items-center">name</p></div>
      <input type="text" placeholder="input userName"
             class="rounded-2xl pl-3vw outline-none"
             v-model="username"
      />
    </div>
    <div class="mt-5vw flex">
      <div class="w-30vw select-none"><p class="flex justify-center items-center">password</p></div>
      <input type="password" placeholder="input password"
             class="rounded-2xl pl-3vw outline-none"
             v-model="password"

      />
    </div>
  </div>
  <div class="button mt-5vw flex flex-col w-full justify-around items-center gap-5vw">
    <p class="h-10vw"
       :class="[type=='Customer' ? 'customerText' : 'businessText']"
    >
      {{message}}
    </p>
    <button class="w-80vw h-10vw rounded-2xl outline-none   text-white "
            :class="[type=='Customer' ? 'customer' : 'business']"
            @click="login()"
    >
      Login
    </button>

    <button class="w-80vw h-10vw rounded-2xl outline-none border-gray hover:bg-gray-3"
            @click="register()"
    >
      Register
    </button>
  </div>
</template>

<style scoped>
.customer{
@apply bg-orange-3 border-orange-400 hover:bg-orange-5;
}
.business{
  @apply bg-blue border-blue-600 hover:bg-blue-6;
}

.customerText{
  @apply text-orange  hover:text-orange-7;
}
.businessText{
  @apply text-blue hover:text-blue-7;
}
</style>